<template>
<!--  <el-empty description="暂无数据"-->
<!--            :image-size="100"-->
<!--            v-if="authors.length <= 0 && colleagues.length <= 0"></el-empty>-->
  <el-tabs type="card">
    <el-tab-pane label="同机构学者" style="width: 320px;">
      <el-empty description="暂无数据"
                :image-size="100"
                v-if="colleagues.length <= 0"></el-empty>
      <div id="colleaguesChart" v-else style="width: 320px; height: 240px"></div>
    </el-tab-pane>
    <el-tab-pane label="不同机构学者" style="width: 320px;">
      <el-empty description="暂无数据"
                :image-size="100"
                v-if="authors.length <= 0"></el-empty>
      <div id="authorsChart" v-else style="width: 320px; height: 240px"></div>
    </el-tab-pane>
  </el-tabs>
<!--  <div id="myChart" v-else style="width: 300px; height: 86%"></div>-->
</template>

<script>
import axios from "@/utils/MyAxios"
import qs from "qs";
import * as echarts from 'echarts'

let Echarts = require("echarts/lib/echarts");
export default {
  name: "RelationNet",
  props: {
    authorId: Number,
    authorName: String
  },
  data() {
    return {
      chart: null,
      authors: [],
      colleagues: [],
    }
  },
  created() {

  },
  mounted() {
    this.getAuthorRelation();
  },
  methods: {
    getAuthorRelation() {
      if (this.authorId !== null) {
        console.log('get ')
        axios.post('/api/author/relation', qs.stringify({
          authorId: this.authorId,
        })).then(res => {
          console.log(res);
          if (res.data.code === 0) {
            this.authors = res.data.data.authors;
            this.colleagues = res.data.data.colleagues;
            if (this.authors.length > 15)
              this.authors = this.authors.slice(0, 15);
            if (this.colleagues.length > 15)
              this.colleagues = this.colleagues.slice(0, 15);
            this.$nextTick(() => {
              //this.drawNet('myChart');
              this.drawNet('colleaguesChart', this.colleagues, 1);
              this.drawNet('authorsChart', this.authors, 0);
            })
          }
        })
      } else {
        this.authors = [];
        this.colleagues = [];
      }
    },
    drawNet(name, list, type) {
      let dom = document.getElementById(name);
      this.chart = echarts.init(dom);
      this.chart.setOption(this.getOption(list, type));
      let _this = this;
      this.chart.on('click', function (params) {
        console.log(params);
        if (params.data.authorId !== this.authorId) {
          const { href } = _this.$router.resolve({
            path: '/portal',
            query: {
              authorId: params.data.authorId
            }
          })
          window.open(href, '_blank');
        }
      })
    },
    getOption(list, type) {
      let categories = [{
        name: '同机构',
        itemStyle: {
          color: "#009800",
        }
      }, {
        name: '不同机构',
        itemStyle: {
          color: "#4592FF",
        }
      }];

      let data = [{
        name: this.authorName,
        authorId: this.authorId,
        draggable: true,
        count: 0,
        id: 0,
        symbolSize: 20
      }];
      let links = [];

      list.forEach((item, i) => {
        let author = {
          name: item.name,
          count: item.count,
          authorId: item.authorId,
          id: i + 1,
          category: type,
          symbolSize: 40 * item.count / 100,
          draggable: true,
        }
        let link = {
          source: 0,
          target: i+1,
          info: item.name + item.count,
          // value: '同机构',
        }
        data.push(author);
        links.push(link);
      })

      return {
        title: {
          text: ''
        },
        tooltip: {
          formatter: function (node) {
            // console.log(node);
            if (node.dataType === 'edge') {
              return '';
            } else {
              if (node.data.count === 0)
                return '作者: ' + node.data.name;
              else
                return node.data.name + '  - 合作 ' + node.data.count + ' 次';
            }

          }
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        label: {
          show: true,
          fontSize: 12
        },
        legend: {
          x: "center",
          show: false,
          data: ["同机构", "不同机构"]
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            symbolSize: 40,
            focusNodeAdjacency: true,
            roam: true,
            categories: categories,
            label: {
              show: true,
              fontSize: 12
            },
            edgeSymbolSize: [4, 50],
            edgeLabel: {
              show: true,
              fontSize: 10,
              formatter: ''
            },
            data: data,
            links: links,
            force: {
              repulsion: 240,
            },
            lineStyle: {
              opacity: 0.9,
              width: 1,
              curveness: 0
            }
          }
        ]
      };
    }
  }
}
</script>

<style scoped>

</style>